<template>
    <div class ="login_container">
        <div class = "login_box">
            <div class = "avator_box">
                <img src="../assets/logo.png">
            </div>

            <el-form :rulers = "loginFormRulers"
            ref = "loginFormRef"
            :model = "loginForm" label-width="0px" class ="login_form">
               <!-- 用户名-->
                <el-form-item prop = "username" >
                    <el-input placeholder="请输入用户名" 
                    v-model = "loginForm.username"
                    prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item prop = "password">
                    <el-input placeholder="请输入密码" 
                    v-model = "loginForm.password"
                    type = "password"
                    prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
               
                <!--按钮-->
                <el-form-item class = "btns">
                    <!--登录-->
                    <el-button type = "primary" @click = "login">登录</el-button>
                    <!--重置-->
                    <el-button type = "info" @click = "resetLoginForm">重置</el-button>
                </el-form-item>
                
                
            </el-form>
        </div>  
    </div>
</template>


<script>
export default {
    data(){
        return{
            loginForm:{
                username: 'admin',
                password: '123456'
            },
            loginFormRulers:{
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur'},
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur'},
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        resetLoginForm(){
            //console.log(this);
            this.$refs.loginFormRef.resetFields();
        },
        login(){
            this.$refs.loginFormRef.validate(async valid =>{
                if(!valid) return;
                const {data:res} = await this.$http.post("login",this.loginForm)
                if(res.meta.status !== 200)  return this.$message.error("用户名或密码错误！");
                else this.$message.success("登录成功！");

                window.sessionStorage.setItem("token",res.data.token);

                this.$router.push('/home');
            });
        }
    },
};
</script>

<style lang="less" scoped>
.login_container {
    background-color: #2b4b6b;
    height:100%;
}

.login_box{
    width: 450px;
    height:300px;
    background-color:#fff;
    border-radius: 3px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%)
}

.avator_box{
    height:130px;
    width:130px;
    border:1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shallow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:#fff;
    img{
        width:100%;
        height:100%;
        border-radius:50%;
        background-color:#eee;
    }
}

.btns{
    display: flex;
    justify-content: flex-end;
}

.login_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
